[#ftl]
[@define "agile.dijit.Dialog" "agile._Component,agile._Container,agile._Resizable,agile._PinAdvice"]
//	category:"Dialog Component"
	widgetName:"Dialog",hasSelector:true
	[#assign templateString][#compress]					
		<div class="agileComponent agileDialog dijitDialog">
		    <div class="dijitDialogTitleBar">
			    <span class="dijitDialogTitle" data-dojo-attach-point='headerWidget' data-dojo-type="dijit/InlineEditBox" data-dojo-props='renderAsHtml:true'>{parameters.title}</span>
			    <span class="dijitDialogCloseIcon" title="{i18n_cancel}"></span>
		    </div>
		    <div style="position:relative" data-dojo-attach-point='containerNode'></div>							    					    
		</div>
	[/#compress][/#assign]
	,templateString:"${templateString?js_string}"	
	,styleConstraints:agile.delegate(agile._Component.prototype.styleConstraints,{
		"left": {ignore:function(ownerWidget,sourceType){ return sourceType == "dojo";}}
	   ,"top": {ignore:function(ownerWidget,sourceType){ return sourceType == "dojo";}}
	   ,"right": {ignore:function(ownerWidget,sourceType){ return sourceType == "dojo";}}
	   ,"bottom": {ignore:function(ownerWidget,sourceType){ return sourceType == "dojo";}}
	   ,"position": {ignore:function(ownerWidget,sourceType){ return sourceType == "dojo";}}
	   ,"z-index": {ignore:function(ownerWidget,sourceType){ return sourceType == "dojo";}}
	})
	,attributes:lang.delegate(agile._Component.prototype.attributes,{
		title:lang.mixin({},agile.TextMetadata,{
			label:"i18n_title"
		   ,onValueChange:function(/*widget*/widget,/*String*/name,/*Object*/value){							   		
			    widget.headerWidget.reset1("value",value);
			    widget.metadata("parameters."+name,value);
			}			  
	   })	
//	   ,connector:lang.mixin({},agile.TextMetadata,{
//			label:"i18n_connector"	
//			,ignore:function(ownerWidget,sourceType){ return sourceType == "dojo";}
//		})
		,showOpenButton:lang.mixin({},agile.BooleanMetadata,{
			label:agile.i18n("show_button",null,"Show button")	
			,ignore:function(ownerWidget,sourceType){ return sourceType == "dojo";}
		})
	})	
	,initDefaultMetadata:function(){
		this.metadata("parameters.title","Hello World");
//		this.metadata("parameters.connector","Open Dialog");
		this.metadata("parameters.showOpenButton",true);
		this.metadata("style.width","250px");
		this.metadata("style.height","200px");
		this.metadata("style.background-color","white");
		this.metadata("dojoDeclaredClass","dijit.Dialog");
	}	
	 ,init:function(){	
		 if(this._initDialog){return;}
		 this._initDialog = true;
		 
		//agile.stopInlineEditBox(this.headerWidget);
		 this.preventDelete(this.headerWidget);
//		aspect.after(this.headerWidget,"edit",lang.hitch(this,function(){
//			var editWidget = this.headerWidget.wrapperWidget.editWidget;
//			if(!editWidget._initialized){
//				on(editWidget, "keyDown",function(evt){
//					evt.stopPropagation();
//				});
//				on(editWidget, "keyUp",function(evt){
//					evt.stopPropagation();
//				});
//				editWidget._initialized = true;
//			}								
//		}));	
		
		this.headerWidget.watch("value",lang.hitch(this,function(name,oldValue,newValue){										
			topic.publish("agile.widget.changed",this.category,"title",newValue);					
			this.metadata("parameters.title",newValue);
		}));
		
	 }
	,getResizableTargetContainer:function(){
		return this.domNode;
	}
	,getResizeHandleAnchorNode:function(){
		return this.domNode;
	}
	,getStyleNodes:function(htmlName){
		if("left top width height".indexOf(htmlName) == -1){
			return [this.domNode,this.containerNode];
		}
		return this.inherited(arguments);
	}
	,getMovableConstraint:function(){									
		return {
			l: 1
			,t: 1
			,w: this.dimension.width - 1
			,h: this.dimension.height - 1 - 30
		}		
	}
	
	,toHtml:function(params){
		if(params.sourceType == "dojo"){			
			if(!this.metadata("parameters.showOpenButton")){
				return this.inherited(arguments);				
			}else{
				
				[#assign showOpenButton]
				[#compress]			
					<button data-dojo-type="dijit/form/Button" data-dojo-props='style:"position:absolute;left:{left};top:{top}",iconClass:"",label:"{connector}"'>
					<script type="dojo/connect" event="onClick">registry.byId("{id}").show()</script>
					</button>					
					{template}
				[/#compress]			
				[/#assign]
				
				return lang.replace("${showOpenButton?js_string}",{
					left:this.metadata("style.left")
					,top:this.metadata("style.top")
					,id:this.metadata("id")
					,connector:this.metadata("parameters.title")
					,template:this.inherited(arguments)});
			}
		}
		return this.inherited(arguments);
	}
//	,serializeId:function(sourceType){
//		//summary:serialize the id attribute if required, format: id="xxxxx"
//		return "id=\"" + this.metadata("id") +"\"";
//	}
[/@]	

